<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 实例</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"/>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <style type="text/css">
      .showImgArea {
        width: 324px;
        height: 576px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    </style>
  </head>
  <body>
    <div class="row">
      <div class="col" style="background-color:lavender;">
        <div class="col-sm-4" style="background-color:lavender;">
          <span class="font-weight-bold" id="coordinatePercentage"></span>
        </div>
        <img
            class="showImgArea"
            id="showImgArea"
            src="../../public/img/mobileScreenshot.png"
/>
      </div>
    </div>
  </div>
</body>
</html>